<template>
	<view class="page-height">
		<i-top-bar title="0" :leftArrow="false" :bgOpacity="0" :fixed="false">
			<view class="" slot="right">
				<view class="msg-view" @click="openWin('/pages/user/msg')">
					<image src="@/static/images/msg.png" class="msg"></image>
					<view class="un-read" v-if="msg_count > 0"></view>
				</view>
			</view>
		</i-top-bar>
		<view class="page-content">
			<view class="top-view">
				<image src="@/static/images/user-bg.png" class="bg"></image>
				<view class="top-content">
					<!-- <status-bar></status-bar> -->
					<!-- <view class="msg-view" @click="openWin('/pages/user/msg')">
						<image src="@/static/images/msg.png" class="msg"></image>
						<view class="un-read"></view>
					</view> -->

					<view class="user-line">
						<image :src="getImageSrc(user.avatar)" mode="aspectFill" class="tx" v-if="user.avatar"></image>
						<image src="@/static/images/tx.png" mode="aspectFill" class="tx" v-else></image>
						<text class="username">{{user.username}}</text>
					</view>
				</view>
			</view>

			<view class="nav-list">
				<view class="nav-line" @click="openWin('/pages/user/user-info')">
					<image src="@/static/images/user-nav01.png" class="ioc"></image>
					<text class="label">个人信息</text>
					<i-icon name="iconfont-icon-jinrujiantouxiao" color="#666666" size="28rpx" @click="openWin('/pages/user/user-info')"></i-icon>
				</view>
				<view class="nav-line" @click="openWin('/pages/user/address')">
					<image src="@/static/images/user-nav02.png" class="ioc"></image>
					<text class="label">地址管理</text>
					<i-icon name="iconfont-icon-jinrujiantouxiao" color="#666666" size="28rpx"></i-icon>
				</view>
				<view class="nav-line" @click="openWin('/pages/user/set')">
					<image src="@/static/images/user-nav03.png" class="ioc"></image>
					<text class="label">系统设置</text>
					<i-icon name="iconfont-icon-jinrujiantouxiao" color="#666666" size="28rpx" @click="openWin('/pages/user/set')"></i-icon>
				</view>
			</view>

			<button class="btn" @click="$refs.quit.show()">退出登录</button>

		</view>
		<i-tabbar :current="2"></i-tabbar>
		<u-toast ref="uToast"></u-toast>
		<confirm ref="quit" content="确认要退出登录吗？" @confirm="confirmQuit()"></confirm>
	</view>
</template>
<script>
	export default {
		data() {
			return {};
		},
		onShow() {
			this.getMsgCount()
			this.getUserInfo()
		},
		computed: {
			msg_count: function() {
				return this.$store.state.msg_count
			}
		},

		methods: {
			getMsgCount() {
				this.api.post("/api/user/newssum").then(res => {
					this.$store.commit('setMsgCount', res.newssum)
					console.log(res.newssum);
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			confirmQuit() {


				this.api.post("/api/user/logout").then(res => {
					this.$store.commit('loginout')
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/login/login-pass"
						})
					}, 10)
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg-view {
		position: relative;
		margin-right: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44rpx;
		height: 44rpx;

		.msg {
			width: 38rpx;
			height: 38rpx;
		}

		.un-read {
			position: absolute;
			display: block;
			top: 0;
			right: 0;
			width: 10rpx;
			height: 10rpx;
			border-radius: 10px;
			background-color: #ff2f4f;
		}
	}

	.page-height {
		background-color: #ffffff;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
		padding-bottom: 20rpx;
	}

	.top-view {
		position: relative;
		display: flex;
		flex-direction: column;

		.bg {
			width: 750rpx;
			height: 416rpx;
		}

		.top-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;

			.msg-view {
				position: relative;
				margin-right: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 44rpx;
				height: 44rpx;
				margin-left: auto;

				.msg {
					width: 38rpx;
					height: 38rpx;
				}

				.un-read {
					position: absolute;
					display: block;
					top: 0;
					right: 0;
					width: 10rpx;
					height: 10rpx;
					border-radius: 10px;
					background-color: #ff2f4f;
				}
			}

			.user-line {
				margin-top: auto;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.tx {
					width: 160rpx;
					height: 160rpx;
					margin-left: 4rpx;
					margin-right: 18rpx;
					border-radius: 100px;
				}

				.username {
					font-size: 36rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}
		}
	}

	.nav-list {
		display: flex;
		flex-direction: column;
		padding: 50rpx 30rpx;

		.nav-line {
			display: flex;
			align-items: center;
			height: 114rpx;
			border-bottom: 1px solid #E5E5E5;

			.ioc {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}

			.label {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}

	.btn {
		width: 690rpx;
		margin: auto 30rpx 140rpx;
	}
</style>